<%--
  Created by IntelliJ IDEA.
  User: guoshuai
  Date: 2016/11/17
  Time: 11:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <section class="panel">
                <header class="panel-heading">
                    用户管理
                    <button type="button" class="btn btn-info pull-right"
                            onclick="oceanModal.openDefault('system/user/item')">新增用户
                    </button>
                </header>
                <div class="panel-body">
                    <table class="table table-striped table-bordered sortable">
                        <thead>
                        <tr>
                            <th>用户名</th>
                            <th>姓名</th>
                            <th>电话</th>
                            <th>角色</th>
                            <th>区域</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="user-list-body">

                        </tbody>
                    </table>
                    <div class="text-center">
                        <ul class="pagination">

                        </ul>
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>

<script type="text/template" id="user-list-template">
    <@ _.each(items, function (item) { @>
    <tr>
        <td><@= item.username @></td>
        <td><@= item.realName @></td>
        <td><@= item.phone @></td>
        <td><@= roleStr(item.roles) @></td>
        <td><@= groupStr(item.groups) @></td>
        <td><@= item.enabled?'正常':'禁用' @></td>
        <td>
            <button class="btn btn-primary btn-xs"
                    onclick="oceanModal.openDefault('system/user/item?id=<@= item.id @>')">
                <i class="icon-pencil"></i>
            </button>
            <button class="btn btn-success btn-xs"
                    onclick="oceanModal.openDefault('system/user/resetPwd?id=<@= item.id @>')">重置密码
            </button>
            <button class="btn btn-danger btn-xs"
                    onclick="confirmDialog.drop('<@= item.id @>','<@= item.name @>', 'com.ocean.core.entity.User')">
                <i class="icon-trash "></i>
            </button>
        </td>
    </tr>
    <@ }); @>
</script>
<script type="text/template" id="user-page-template">
    <@ for(var index=1;index<=totalPages;index++) { @>
    <@ if(number==index-1) {@>
    <li class="active"><a href="javascript:void(0)" data-index="<@=index @>"><@=index @></a></li>
    <@ } else { @>
    <li><a href="javascript:void(0)" data-index="<@=index @>"><@=index @></a></li>
    <@ }} @>
</script>
<script type="application/javascript">
    function load(page) {
        if (page == null) {
            page = 1;
        }
        WaitingDialog.show();
        $.post("resources/user/list", {page: page}, function (data) {
            console.log(data);
            WaitingDialog.dismiss();
            if (data == null) {
                return;
            }
            var tmpl = _.template($('#user-list-template').html());
            $('#user-list-body').html(tmpl({items: data.content}));

            var tmpl_page = _.template($('#user-page-template').html());
            $('.pagination').html(tmpl_page({totalPages: data.totalPages, number: data.number}));

            $('.pagination a').click(function () {
                load($(this).data("index"));
            });
        });
    }
    load();

    function roleStr(roles) {
        var str = "";
        $.each(roles, function (index, role) {
            str += role.name + " ";
        });
        return str;
    }

    function groupStr(groups) {
        var str = "";
        $.each(groups, function (index, group) {
            str += group.name + " ";
        });
        return str;
    }
</script>
